<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>活动基本信息</span>
      </div>
      <div class="info">
        <el-row>
          <el-col :span="4"><span>活动名称</span></el-col>
          <el-col :span="8"><span>{{form.activeName}}</span></el-col>
          <el-col :span="4"><span>活动时间</span></el-col>
          <el-col :span="8"><span>{{form.startTime}} ~ {{form.endTime}}</span></el-col>
        </el-row>
        <el-row>
          <el-col :span="4"><span>活动油站</span></el-col>
          <el-col :span="8"><span>{{form.gasName}}</span></el-col>
          <el-col :span="4"><span>发券/领券数量</span></el-col>
          <el-col :span="8"><span>{{form.couponNum}}</span></el-col>
        </el-row>
        <el-row>
          <el-col :span="4"><span>发放/领取人数</span></el-col>
          <el-col :span="8"><span>{{form.sendNum}}</span></el-col>
          <el-col :span="4"><span>核销券数量</span></el-col>
          <el-col :span="8"><span>{{form.couponUsedNum}}</span></el-col>
        </el-row>
        <el-row>
          <el-col :span="4"><span>核销人数</span></el-col>
          <el-col :span="8"><span>{{form.joinUserNum}}</span></el-col>
          <el-col :span="4"><span>发券明细</span></el-col>
          <el-col :span="8">
            <div @click="dialogTableVisible = true" class="see">查看</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4"><span>通知方式</span></el-col>
          <el-col :span="8"><span>{{form.noticeWay}}</span></el-col>
          <el-col :span="4"><span>通知消耗</span></el-col>
          <el-col :span="8"><span>{{form.noticeWayDetail}}</span></el-col>
        </el-row>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>活动数据</span>
      </div>
      <div>
        <el-row :gutter="12" style="font-size:14px; color:#999999;">
          <el-col :span="3">数据统计时间</el-col>
          <el-col :span="8">{{form.createTime}}至{{form.endTime}}</el-col>
        </el-row>
        <div class="pic">
          <div class="pic-left">
            <div class="left-word">
              <div><span>召唤订单数</span><span>{{form.orderNum}}</span></div>
              <div><span>发放人数</span><span>{{form.sendNum}}</span></div>
            </div>
            <div class="left-pic">
              <div id="myChart" :style="{height: '150px'}"></div>
            </div>
            <div class="left-title">
              <div><span style="background: #5293F4;"></span><span>召唤油站新客：</span><span>{{form.newUserNum}}</span></div>
              <div><span style="background: #E31937;"></span><span>召唤老司机：</span><span>{{form.oldUserNum}}</span></div>
            </div>
          </div>
          <div class="pic-left">
            <div class="left-word">
              <div><span>产生订单金额(元)</span><span>￥{{form.totalOrderAmount}}</span></div>
            </div>
            <div class="left-pic">
              <div id="myChart1" :style="{height: '150px'}"></div>
            </div>
            <div class="left-title">
              <div><span style="background: #5293F4;"></span><span>新司机订单金额：</span><span>￥{{form.newUserAmount}}</span></div>
              <div><span style="background: #E31937;"></span><span>老司机订单金额：</span><span>￥{{form.oldUserAmount}}</span></div>
            </div>
          </div>
        </div>
        <div class="oil-Show">
          <div><span>加油数量（升）</span><span>{{form.oilLiter}}</span></div>
          <div><span>产生订单数（笔）</span><span>{{form.orderNum}}</span></div>
          <div><span>客单价（元）</span><span>￥{{form.averageCost || 0}}</span></div>
          <div><span>实际营销成本（元）</span><span>￥{{form.totalActivityCostAmount || 0}}</span></div>
        </div>
        <div class="btn">
          <el-button size="mini" @click="back" type="primary">返回</el-button>
        </div>
      </div>
    </el-card>
    <el-dialog title="发券明细" width="820px" :visible.sync="dialogTableVisible">
      <el-table :data="gridData" border height="400px">
        <el-table-column property="couponRuleName" label="券名称" width="120"></el-table-column>
        <el-table-column property="couponMoney" label="优惠券面值（元）" width="140"></el-table-column>
        <el-table-column property="couponConditionMoney" label="使用门槛" width="120"></el-table-column>
        <el-table-column property="createTime" label="券生效时间" width="140"></el-table-column>
        <el-table-column property="endTime" label="券结束时间" width="140"></el-table-column>
        <el-table-column property="oils" label="可用油品" width="120"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { activeDetail, activeDetailCheck } from '@/api/market'
export default {
  data () {
    return {
      dialogTableVisible: false,
      id: '',
      gridData: [],
      form: {
        activeName: '', // 活动名称
        createTime: '', // 配置时间
        endTime: '', // 结束时间
        gasName: '', // 活动油站
        sendNum: '', // 触达人数-----总召唤数
        couponNum: '', // 发券数量
        noticeWay: '', // 通知方式
        noticeWayDatail: '', // 通知消耗
        nowTime: '', // 数据统计时间
        joinUserNum: '', // 召唤成功数----
        newUserNum: '', // 召唤油站新客
        oldUserNum: '', // 召唤老司机
        totalOrderAmount: '', // 产生订单金额
        newUserAmount: '', // 新客订单金额
        oldUserAmount: '', // 老客订单金额
        oilLiter: '', // 加油数量
        orderNum: '', // 产生订单数
        averageCost: '', // 客单价
        totalActivityCostAmount: '' // 实际营销成本
      }
    }
  },
  methods: {
    // 返回
    back () {
      this.$router.push({ path: '/marketCenter/marketActivity' })
    },
    drawLine (dataCall) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [{
          name: '访问来源',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '14',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: dataCall
        }]
      })
    },
    drawLine1 (dataOrder) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart1'))
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [{
          name: '访问来源',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '14',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: dataOrder
        }]
      })
    },
    async activeDetailApi (activeId) {
      try {
        const { code, result } = await activeDetail({ activeId })
        if (code !== 200) return
        const {
          activeName,
          createTime,
          endTime,
          gasName,
          sendNum,
          couponNum,
          noticeWay,
          noticeWayDatail,
          nowTime,
          joinUserNum,
          newUserNum,
          oldUserNum,
          totalOrderAmount,
          newUserAmount,
          oldUserAmount,
          oilLiter,
          orderNum,
          averageCost,
          totalActivityCostAmount,
          noticeWayDetail,
          couponUsedNum,
          startTime
        } = result
        const paramsCopy = {
          activeName,
          createTime,
          endTime,
          gasName,
          sendNum,
          couponNum,
          noticeWay,
          noticeWayDatail,
          nowTime,
          joinUserNum,
          newUserNum,
          oldUserNum,
          totalOrderAmount,
          newUserAmount,
          oldUserAmount,
          oilLiter,
          orderNum,
          averageCost,
          totalActivityCostAmount,
          noticeWayDetail,
          couponUsedNum,
          startTime
        }
        this.form = paramsCopy
        const dataCall = [{ value: newUserNum, name: '召唤油站新客', itemStyle: { color: '#5293F4' } }, { value: oldUserNum, name: '召唤老司机', itemStyle: { color: '#E31937' } }]
        const dataOrder = [{ value: newUserAmount, name: '新客订单金额', itemStyle: { color: '#5293F4' } }, { value: oldUserNum, name: '老客订单金额', itemStyle: { color: '#E31937' } }]
        this.drawLine(dataCall)
        this.drawLine1(dataOrder)
      } catch (err) {
        console.log(err)
      }
    },
    async activeDetailCheckApi (id) {
      try {
        const { code, result } = await activeDetailCheck({ id: id })
        if (code !== 200) return
        this.gridData = result
      } catch (err) {
        console.log(err)
      }
    }
  },
  mounted () {
    const id = this.$route.query.mark
    this.id = id
    this.activeDetailCheckApi(id)
    this.activeDetailApi(id)
  }
}
</script>

<style lang="less" scoped>

  .el-row {
    margin-top: 20px;
    > .el-col:nth-child(even) {
      min-height: 20px;
      color: #666;
      font-size: 14px;
    }
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
    margin-top: 10px;
  }

  .see {
    color: blue;
    cursor: pointer;
  }

  .pic {
    width: 100%;
    height: 160px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .pic-left {
      width: 50%;
      height: 150px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left-word {
        width: 24%;
        height: 150px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        > div {
          width: 100%;
          height: 75px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          span {
            margin-top: 10px;
            font-size: 14px;
            font-weight: bold;
          }
          span:nth-child(1) {
            font-size: 14px;
            color: #606266;
          }
        }
      }
      .left-pic {
        flex: 1;
        height: 160px;
      }
      .left-title {
        width: 50%;
        height: 150px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        color: #666666;
        font-size: 14px;
        > div {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          span {
            margin-left: 5px;
          }
          span:nth-child(1) {
            display: block;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            // background: chocolate;
          }
        }
      }
    }
    .pic-right {
      width: 100%;
      height: 150px;
      border: 1px solid #00ff00;
    }
  }

  .oil-Show {
    margin-top: 10px;
    height: 100px;
    width: 100%;
    border: 1px solid #ccc;
    border-style: solid none none none;
    display: flex;
    justify-content: space-between;
    > div {
      width: 15%;
      margin-left: 100px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      > span:nth-child(1) {
        color: #606266;
        font-size: 14px;
      }
      > span:nth-child(2) {
        margin-top: 10px;
        font-weight: bold;
        font-size: 22px;
      }
    }
    > div:nth-child(1) {
      margin-left: 0;
    }
  }

  .btn {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }
</style>
